import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ThreadsVo } from 'src/app/model/threads-vo';
import { ThreadsService } from 'src/app/services/threads.service';
import { Observable } from 'rxjs';
import { MemberService } from 'src/app/services/member.service';
import { MemberProfileVo } from 'src/app/model/member-profile-vo';
import { BtnNaviSharedService } from 'src/app/services/btn-navi-shared.service';
import { Title } from '@angular/platform-browser';
@Component({
  selector: 'app-threads-poster',
  templateUrl: './threads-poster.component.html',
  styles: [`
  #poster-body{padding:20px;background-color: #fff;}#poster-body article h3{line-height: 2em;height: 1.5em;overflow: hidden;}#body-detail{padding:20px 0;line-height:1.6em;color:#666}
  #poster-footer{border-top:1px dashed #ddd;padding-top:30px}.table-cell-w300{display:table-cell;width:300px;}.table-cell-auto{display:table-cell;width:auto}
  .pl10{padding-left:10px;}.pl160{padding-left:160px}
  `]
})
/**
 * 话题海报
 * @constructor
 */
export class ThreadsPosterComponent implements OnInit {
  public topic!: ThreadsVo;
  public profile$!: Observable<MemberProfileVo>;

  constructor(
    private title: Title,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private threadsService: ThreadsService,
    private memberService: MemberService,
    private btnNaviSharedService: BtnNaviSharedService) {
    this.btnNaviSharedService.active(false); //不显示全局的导航
  }
  //npm install angular2-qrcode @see:https://www.positronx.io/angular-generate-or-create-qr-code-using-angular2-qrcode-package/
  //npm install ng-lazyload-image @see:https://www.npmjs.com/package/ng-lazyload-image
  ngOnInit(): void {
    let topicId: number = this.activatedRoute.snapshot.queryParams['id'];
    this.threadsService.get(topicId).subscribe({
      next: response => {
        this.topic = response;
        this.title.setTitle('话题海报:' + this.topic.title);
      },
      error: err => {
        this.router.navigate(['404']);
      },
      complete: () => {
        console.log('[ThreadsPoster-CTL]Completed');
        if (this.topic) {
          this.profile$ = this.memberService.getProfile(this.topic.member);
        }
      }
    });
  }

}
